<template>
    <el-row :gutter="20" class="marginTop20" >
      <el-col :span="24" v-infinite-scroll="loadMoreData" style="height: 790px;overflow: auto;" class="boxCol">
        <div v-if="data.length > 0">
          <div class="box back151225 marginBottom20 colorFFF" v-for="(item, index) in data" :key="index" @click="toDetails('/service/infomation-details?id=' + item.creation_id)">
            <div class="flexFS">
              <el-avatar :src="item.creation.author.avatar" alt="" srcset="" style="width: 40px; height: 40px" slot="reference"
                v-if="item.creation.author"></el-avatar>
              <div style="width: 150px; margin-left: 10px">
                <div class="size14">
                  {{ item.creation.author.name }}
                </div>
                <div class="color999 size12 flexFS">
                  {{ item.creation.created_at }}
                </div>
              </div>
            </div>
            <div class="marginTop10 size14">
              {{ item.creation.content }}
            </div>
            <el-row :gutter="10">
              <el-col :key="key" :span="6" class="mt-5" v-for="(value, key) in item.creation.media_urls">
                <el-image :preview-src-list="item.creation.media_urls" :src="value" class="radius10" fit="cover"
                  style="width: 100%; height: 220px"></el-image>
              </el-col>
            </el-row>
            <div class="flexFS marginTop10">
              <div class="flexFS size12" style="width: 80px">
                <img alt src="@/assets/icon/creation/views.png" srcset width="20px" />
                <span>{{ item.creation.viewed }}</span>
              </div>
              <div class="flexFS size12" style="width: 80px">
                <img alt src="@/assets/icon/creation/like_invalid.png" srcset width="20px" />
                <span>{{ item.creation.like_count }}</span>
              </div>
  
              <div class="flexFS size12" style="width: 80px">
                <img alt src="@/assets/icon/creation/share.png" srcset width="20px" />
                <span>{{ item.creation.forwards }}</span>
              </div>
              <div class="flexFS size12" style="width: 80px">
                <img alt src="@/assets/icon/creation/dasang.png" srcset width="20px" />
                <span>打赏</span>
              </div>
              <!-- <div class="flexFS color999 size12" style="width: 100px;">
                          <img alt src="@/assets/icon/creation/pl.png" srcset width="20px" />
                          <span>{{ item.comment_count }}</span>
                      </div> -->
            </div>
          </div>
          <div class="text-center font-15 color-999 mt-10" v-if="append_loading">
            加载中...
          </div>
          <div class="text-center font-15 color-999 mt-10" v-if="data.length >= total">
            ~没有更多了~
          </div>
        </div>
        <div v-else>
          <el-empty :image="empty_image"></el-empty>
        </div>
      </el-col>
    </el-row>
  </template>
  <script>
  import pageTool from "@/mixins/page";
  import recommendVideo from "@/components/recommend-video/index";
  export default {
    mixins: [pageTool],
    components: {
      recommendVideo,
    },
    props: {
          user_id: {
              type: [Number, String]
          }
      },
    data() {
      return {
        query: {
          creation_type: "infomation",
        },
        empty_image: require('@/assets/image/empty.png'),
      };
    },
    mounted() {
        if (this.user_id) {
              this.query.user_id = this.user_id
              this.beforeInit();
          }
     
    },
    methods: {
      beforeInit() {
        this.url = "/creation/like/index";
        this.append = true;
        this.init(); //重新请求数据
      },
      toDetails(url){
      this.$router.push({path:url})
    },
      loadMoreData() {
        console.log("我执行了");
        this.page++;
        this.init();
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .boxCol::-webkit-scrollbar {
      display: none; /*隐藏滚动条*/
  }
  </style>